import React, { useEffect } from 'react';
import { Outlet, useNavigate, useLocation } from 'react-router-dom';
import { TabBar } from 'antd-mobile';
import {
  AppOutline,
  UnorderedListOutline,
  ShopbagOutline,
  UserOutline
} from 'antd-mobile-icons';
import './FrontendLayout.css';

// 前台布局组件
const FrontendLayout = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const { pathname } = location;

  // 检查用户是否登录
  useEffect(() => {
    const userInfo = localStorage.getItem('userInfo');
    // 如果用户未登录且不是在登录页面，则重定向到登录页面
    if (!userInfo && pathname !== '/login') {
      navigate('/login');
    }
  }, [navigate, pathname]);

  // 底部导航项
  const tabs = [
    {
      key: '/home',
      title: '首页',
      icon: <AppOutline />,
    },
    {
      key: '/category/1',
      title: '分类',
      icon: <UnorderedListOutline />,
    },
    {
      key: '/cart',
      title: '购物车',
      icon: <ShopbagOutline />,
    },
    {
      key: '/my',
      title: '我的',
      icon: <UserOutline />,
    },
  ];

  // 切换标签页
  const setRouteActive = (value) => {
    navigate(value);
  };

  return (
    <div className="frontend-container">
      {/* 主内容区域 */}
      <div className="frontend-content">
        <Outlet />
      </div>

      {/* 底部导航 */}
      <div className="frontend-tabbar">
        <TabBar activeKey={pathname} onChange={value => setRouteActive(value)}>
          {tabs.map(item => (
            <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
          ))}
        </TabBar>
      </div>
    </div>
  );
};

export default FrontendLayout; 